// TablePagination.js
import { ref, onMounted } from 'vue';

export const useTablePagination = (fetchDataFunction) => {
  const tableData = ref([]);
  const currentPage = ref(1);
  const pageSize = ref(10);
  const total = ref(0);

  const fetchData = async () => {
    try {
      const response = await fetchDataFunction(currentPage.value, pageSize.value);
      tableData.value = response.data;
      total.value = response.total; // Assuming the API returns the total count
    } catch (error) {
      console.error(error);
    }
  };

  const handleSizeChange = (val) => {
    pageSize.value = val;
    currentPage.value = 1;
    fetchData();
  };

  const handleCurrentChange = (val) => {
    currentPage.value = val;
    fetchData();
  };

  onMounted(() => {
    fetchData();
  });

  return {
    tableData,
    currentPage,
    pageSize,
    total,
    handleSizeChange,
    handleCurrentChange,
  };
};
